<template>
    <div class="cinformation" v-loading.fullscreen.lock="isLoading" element-loading-text="加载中">
        <el-header style="height: 100px;">
            <div class="tit">
                <el-logo></el-logo>
                <div class="right">
                    <img src="../../assets/images/login/phone.png" alt="">
                    <span>{{ tel }}</span>
                </div>
            </div>
        </el-header>
        <el-main style="padding: 0;width: 100%;">
            <div class="con">
                <div class="pinfo">
                    <div class="titinfo">单位信息</div>
                    <div class="list">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px"
                            class="demo-ruleForm">
                            <el-form-item label="营业执照" prop="comp_license">
                                <el-input v-model="ruleForm.comp_license" placeholder="请输入统一社会信用代码,与营业执照一致"
                                    @input="validateForm" maxlength="18" minlength="18"></el-input>
                            </el-form-item>
                            <el-form-item label="单位名称" prop="comp_name">
                                <el-input v-model="ruleForm.comp_name" placeholder="请输入单位名称,与营业执照一致"
                                    @input="validateForm"></el-input>
                            </el-form-item>
                            <el-form-item label="法人代表" prop="mastername">
                                <el-input v-model="ruleForm.mastername" placeholder="请输入法人代表姓名"
                                    @input="validateForm"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="master_sex">
                                <el-radio v-model="ruleForm.master_sex" label="1" border
                                    @input="validateForm">男</el-radio>
                                <el-radio v-model="ruleForm.master_sex" label="2" border
                                    @input="validateForm">女</el-radio>
                            </el-form-item>
                            <el-form-item label="民族" prop="master_nation">
                                <el-input v-model="ruleForm.master_nation" placeholder="请输入民族"
                                    @input="validateForm"></el-input>
                            </el-form-item>
                            <el-form-item label="证件号码" prop="masteridcard">
                                <el-input v-model="ruleForm.masteridcard" placeholder="请输入法人代表证件号码"
                                    @input="validateForm"></el-input>
                            </el-form-item>
                            <el-form-item label="证件类型">
                                <el-input v-model="ruleForm.masteridcard_type" placeholder="身份证"
                                    :disabled="true"></el-input>
                            </el-form-item>
                            <el-form-item label="证件有效期" required style="width:100%;">
                                <el-col :span="11">
                                    <el-form-item prop="start_time">
                                        <el-date-picker v-model="ruleForm.start_time" type="date" placeholder="开始日期"
                                            :picker-options="pickerOptions" @input="validateForm" />
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2" style="position: relative;left:-9px;">至</el-col>
                                <el-col :span="11">
                                    <el-form-item prop="end_time">
                                        <el-date-picker v-model="ruleForm.end_time" type="date" placeholder="结束日期"
                                            :picker-options="endDatePickerOptions" @input="validateForm" />
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <!-- <el-form-item label="身份证正面" prop="master_idcards">
                                <el-upload class="avatar-uploader" @input="validateForm" name="img" :action="this.upImgUrl"
                                    :on-success="handleAvatarSuccessbus" :show-file-list="false"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.master_idcards" :src="ruleForm.master_idcards" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="身份证反面" prop="master_idcarde">
                                <el-upload class="avatar-uploader" @input="validateForm" name="img" :action="this.upImgUrl"
                                    :on-success="handleAvatarSuccessmap" :show-file-list="false"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.master_idcarde" :src="ruleForm.master_idcarde" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item> -->
                            <el-form-item label="单位Logo" prop="comp_logo">
                                <el-upload class="avatar-uploader" @input="validateForm" name="img"
                                    :action="this.upImgUrl" :on-success="handleAvatarSuccesslogo"
                                    :show-file-list="false" :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.comp_logo" :src="ruleForm.comp_logo" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="单位营业执照" prop="comp_license_images">
                                <el-upload class="avatar-uploader" @input="validateForm" name="img"
                                    :action="this.upImgUrl" :on-success="handleAvatarSuccessbuss"
                                    :show-file-list="false" :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.comp_license_images" :src="ruleForm.comp_license_images"
                                        class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="单位环境图" prop="envir_image">
                                <el-upload class="avatar-uploader" @input="validateForm" name="img"
                                    :action="this.upImgUrl" :on-success="handleAvatarSuccessmapp"
                                    :show-file-list="false" :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.envir_image" :src="ruleForm.envir_image" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>

                        </el-form>
                        <div class="checkBtnInfo">
                            <input class="inputcheck1" type="checkbox" @change="checkPrivacy"
                                :checked="checkFlag" />已阅读并同意<span @click="serviceAgreement">《用户服务协议》</span>和<span
                                @click="privacyAgreement">《隐私协议》</span>
                        </div>
                        <button :class="{ 'button': true, 'disabled-button': isDisabled }" :disabled="isDisabled"
                            @click="registerNow">
                            立即注册
                        </button>
                    </div>
                </div>
            </div>
        </el-main>
        <div class="alert" v-if="alertshow">
            <div class="alertbox">
                <div class="title">用户服务协议</div>
                <div class="line1"></div>
                <div class="content" v-html="zp_agreement.content" ref="scrollView" @scroll="handleScroll"></div>
                <div class="line2"></div>
                <button class="confirm" @click="confirm">确认</button>
            </div>
        </div>
        <div class="alert" v-if="alertshow1">
            <div class="alertbox">
                <div class="title">用户隐私政策</div>
                <div class="line1"></div>
                <div class="content" v-html="zp_agreement.content" ref="scrollView1" @scroll="handleScroll1"></div>
                <div class="line2"></div>
                <button class="confirm" @click="confirm">确认</button>
            </div>
        </div>
        <el-footers></el-footers>
    </div>
</template>

<script>
import elLogo from "../../common/elLogo.vue";
import elFooters from "../../common/elFooterss.vue";
// import { mapState } from 'vuex';
import { upImgUrl } from '../../utils/baseUrl.js'

export default {
    data() {
        var validateIdCard = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入身份证号'));
            } else if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/.test(value)) {
                callback(new Error('请输入有效的身份证号'));
            } else {
                callback();
            }
        };
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            endDatePickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now(); // 禁用当前时间之前的日期
                }
            },
            index_base: [],
            ruleForm: {
                comp_license: '',   //营业执照号
                comp_name: '',  //单位名称
                mastername: '', //法人姓名
                masteridcard: '',   //法人身份证号
                comp_logo: '',   // 单位logo
                master_idcards: '',  // 营业执照
                master_idcarde: '',
                masteridcard_type: '身份证',//证件类型
                end_time: '',
                start_time: '',
                master_nation: '',//民族
                master_sex: '',//性别
                comp_license_images: '',//营业执照
                envir_image: '',//环境照片

            },
            imageUrl: '',
            rules: {
                comp_license: [
                    { required: true, message: '请输入代码', trigger: 'blur' }
                ],
                comp_name: [
                    { required: true, message: '请输入单位名称', trigger: 'blur' }
                ],
                mastername: [
                    { required: true, message: '请输入法人姓名', trigger: 'blur' }
                ],
                masteridcard: [
                    { required: true, validator: validateIdCard, trigger: 'blur' }
                ],
                master_sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                master_nation: [
                    { required: true, message: '请选择民族', trigger: 'blur' }
                ],
                start_time: [
                    { required: true, message: '请选择开始日期', trigger: 'change' }
                ],
                end_time: [
                    { required: true, message: '请选择结束时间', trigger: 'change' }
                ],
                comp_logo: [
                    { required: true, message: '请上传单位Logo', trigger: 'blur' }
                ],
                // master_idcards: [
                //     { required: true, message: '请上传单位营业执照照片', trigger: 'blur' }
                // ],
                // master_idcarde: [
                //     { required: true, message: '请上传单位环境图', trigger: 'blur' }
                // ],
                comp_license_images: [
                    { required: true, message: '请上传单位营业执照照片', trigger: 'blur' }
                ],
                envir_image: [
                    { required: true, message: '请上传单位环境图', trigger: 'blur' }
                ]
            },
            checkFlag: false, //check选中
            readFlag: false, //阅读协议
            alertshow: false,
            alertshow1: false,
            zp_agreement: [],
            isDisabled: true, // 初始禁用状态 
            upImgUrl: '',
            logo: '',
            tel: '',
            isLoading: false,
            uid: '',
        };
    },
    created() {
        this.upImgUrl = upImgUrl
        this.uid = localStorage.getItem('uid') // 获取数据
        const cachedDataStr = localStorage.getItem("zp_index_base");
        if (cachedDataStr) {
            const cachedData = JSON.parse(cachedDataStr);
            this.tel = cachedData.IndexBase.tel
        }
    },
    methods: {
        handleScroll(e) {
            const { scrollTop, clientHeight, scrollHeight } = e.target;
            // console.log(scrollTop, clientHeight, scrollHeight);
        },
        handleScroll1(e) {
            const { scrollTop, clientHeight, scrollHeight } = e.target;
            // console.log(scrollTop, clientHeight, scrollHeight);
        },
        confirm() {
            this.alertshow = false;
            this.alertshow1 = false;
        },
        validateForm() {
            console.log(this.ruleForm.start_time, '========', this.ruleForm.end_time);
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid);
                if (valid && this.checkFlag) {
                    this.isDisabled = false;
                } else {
                    this.isDisabled = true;
                }
            });
        },
        checkPrivacy() {
            this.checkFlag = !this.checkFlag;
            this.validateForm(); // 触发表单验证 
        },
        async serviceAgreement() {
            this.alertshow = true;
            const res = await this.$service.post({
                url: "/api/zp/v1/zp_agreement",
                data: {
                    type: "1",
                },
            });
            if (res.code == 1) {
                this.zp_agreement = res.info;
            }
            if (res.code != -1 && res.code != 1) {
                this.$message(res.msg);
            }
        },
        async privacyAgreement() {
            this.alertshow1 = true;
            this.alertshow = false;
            const res = await this.$service.post({
                url: "/api/zp/v1/zp_agreement",
                data: {
                    type: "2",
                },
            });
            if (res.code == 1) {
                this.zp_agreement = res.info;
            }
            if (res.code != -1 && res.code != 1) {
                this.$message(res.msg);
            }
        },
        beforeAvatarUpload(file) {
            const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isJPGorPNG) {
                this.$message.error('请上传 JPG 或 PNG 格式的图片!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
            }
            return isJPGorPNG && isLt2M;
        },
        handleAvatarSuccesslogo(res, file, fileList) {
            this.ruleForm.comp_logo = res.info.img_url
            this.$refs.ruleForm.validateField('comp_logo');

        },
        // handleAvatarSuccessbus(res, file) {
        //     this.ruleForm.master_idcards = res.info.img_url
        //     this.$refs.ruleForm.validateField('master_idcards');
        // },
        // handleAvatarSuccessmap(res, file) {
        //     this.ruleForm.master_idcarde = res.info.img_url
        //     this.$refs.ruleForm.validateField('master_idcarde');
        //  },
        handleAvatarSuccessbuss(res, file) {
            this.ruleForm.comp_license_images = res.info.img_url
            this.$refs.ruleForm.validateField('comp_license_images');
        },
        handleAvatarSuccessmapp(res, file) {
            this.ruleForm.envir_image = res.info.img_url
            this.$refs.ruleForm.validateField('envir_image');
        },
        async registerNow() {
            this.isLoading = true

            // 格式化日期
            const formatDate = (dateStr) => {
                const date = new Date(dateStr);

                const formatter = new Intl.DateTimeFormat('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit'
                });

                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');

                return `${year}-${month}-${day}`;
            };

             // 格式化开始时间和结束时间
            const formattedStartTime = formatDate(this.ruleForm.start_time);
            const formattedEndTime = formatDate(this.ruleForm.end_time);

            const res = await this.$service.post({
                url: '/api/zp/v1/zpapp_prefect_comp',
                data: {
                    comp_license: this.ruleForm.comp_license,
                    comp_name: this.ruleForm.comp_name,
                    mastername: this.ruleForm.mastername,
                    masteridcard: this.ruleForm.masteridcard,
                    comp_logo: this.ruleForm.comp_logo,
                    // master_idcards: this.ruleForm.master_idcards,
                    // master_idcarde: this.ruleForm.master_idcarde,
                    comp_license_images: this.ruleForm.comp_license_images,
                    envir_image: this.ruleForm.envir_image,
                    mastergender: this.ruleForm.master_sex,
                    masternation: this.ruleForm.master_nation,
                    master_docu_type: this.ruleForm.masteridcard_type,
                    // master_idcards: this.ruleForm.start_time,//开始时间
                    // master_idcarde: this.ruleForm.end_time,//结束时间
                    master_idcards: formattedStartTime,//开始时间
                    master_idcarde: formattedEndTime,//结束时间
                    uid: this.uid,
                }
            })
            this.isLoading = false
            if (res.code == 1) {
                this.$message.success("注册成功");
                this.$router.push("/login")
            } else {
                this.$message(res.msg);


            }
        }
    },
    components: {
        elLogo,
        elFooters
    },
};
</script>

<style scoped>
button.confirm {
    width: 66px !important;
    height: 30px !important;
    background: #d00 !important;
    position: relative !important;
    font-size: 16px !important;
    border: none !important;
    color: #fff !important;
    position: relative !important;
    top: 11px !important;
    left: 440px !important;
}

.alert {
    background-color: rgba(0, 0, 0, 0.45);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

.alert .title {
    height: 55px;
    word-wrap: break-word;
    color: rgba(0, 0, 0, 0.85);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    display: block;
    padding: 0 24px;
    box-sizing: border-box;
    line-height: 55px;
    border: none;
}

.alert .alertbox {
    width: 520px;
    /* height: 850px; */
    height: 80%;
    margin: 50px 0;
    background-color: #fff;
    border-radius: 2px;
}

.alert .alertbox .content {
    width: 500px;
    height: 82%;
    background-color: #fff;
    overflow: auto;
    padding: 24px 0 24px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}

::v-deep .alert .alertbox .content * {
    background-color: #fff;
}

.alert .alertbox .line1 {
    width: 520px;
    height: 1px;
    background-color: #f3f3f3;
    margin-bottom: 20px;
}

.alert .alertbox .line2 {
    width: 520px;
    height: 1px;
    background-color: #f3f3f3;
    margin-top: 20px;
}

::v-deep .alertbox .el-button {
    width: 66px;
    height: 30px;
    padding: 0;
    background: #f5f5f5;
    border-color: #d9d9d9;
    line-height: 30px;
    position: relative;
    top: 11px;
    left: 440px;
}

.checkBtnInfo {
    width: 281px;
    font-weight: 400;
    font-size: 13px;
    color: #999999;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    margin-left: 166px;
    position: relative;
    margin-bottom: 22px;
    background-color: #fff;
}

.checkBtnInfo span {
    color: #496cb3;
    background-color: #fff;
}

input.inputcheck1 {
    position: absolute;
    top: 1px;
    left: -20px;
}

.avatar-uploader {
    background: #fff;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    background: #fff;
    border: 1px dashed;
    border-radius: 6px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.cinformation {
    background-color: #f3f3f3;
}

.el-main {
    background-color: #f3f3f3;
}

.el-header {
    width: 100%;
    background-color: #fff;
    height: 100px;
    padding: 0;
}

.tit {
    background-color: #fff;
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.left {
    height: 60px;
    width: 210px;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.left div {
    background-color: #fff;
}

.tit img.logo {
    width: 221px;
    height: 55px;
    /* width: 55px; */
    background-color: #fff;

}

.text div:nth-child(2) {
    font-size: 7px;
}

.text i {
    font-weight: 600;
    background-color: #fff;
}

.right {
    width: 170px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}

.right img {
    width: 20px;
    height: 20px;
    background-color: #fff;
}

.right span {
    background-color: #fff;
}

.con {
    /* width: 1200px; */
    /* height: 100%; */
    margin: 0 auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    background: #f3f3f3;
}

.pinfo {
    width: 800px;
    /* height: 550px; */
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.pinfo .titinfo {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDFE6;
    background-color: #fff;
}

.list {
    width: 700px;
    /* height: 350px; */
    margin: 0 auto;
    margin-top: 25px;
    background-color: #fff;
}

::v-deep .el-form-item__label,
.el-form,
.el-form-item,
::v-deep .el-form-item__error {
    background-color: #fff;
}

button.send {
    width: 85px;
    height: 25px;
    background-color: #dd0000;
    border: none;
    position: relative;
    top: -62px;
    left: 307px;
    color: #fff;
    line-height: 25px;
}

.button {
    width: 550px;
    height: 40px;
    background-color: #dd0000;
    border-radius: 4px;
    border: none;
    position: relative;
    top: 0px;
    left: 10%;
    color: #fff;
}

.disabled-button {
    background-color: #ccc;
    cursor: not-allowed;
}

.el-input {
    background-color: #fff;
    width: 550px;
}

::v-deep .el-input__icon {
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
}

::v-deep .el-input__prefix {
    height: 20px;
    margin-top: 2px;
    background-color: #fff;
}

.el-icon-date:before {
    color: #dd0000;
}

.el-input--prefix .el-input__inner {
    width: 260px;
}

::v-deep .el-form-item__content {
    background-color: #fff;
}

.el-col:first-child {
    margin-right: 38px;
}

::v-deep .el-select {
    width: 550px;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 240px;
}

::v-deep .el-form-item__content {
    background-color: #fff;
    display: flex;
}
</style>